<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 组件变量作用域</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <!-- 调用组件 -->
        <v-note :title='title' :messages='messages'></v-note>
        <!-- 默认显示，isShow 是 vue 实例的变量 -->
        <v-comp v-show='isShow'></v-comp>
    </div>

    <!-- 自定义组件模板 -->
    <template id='comp'>
        <div>
            <h2>{{msg}}</h2>
            <!-- 默认不会显示，isShow 是组件的变量，通过 app.$children[1].isShow=true 可以让该按钮进行显示 -->
            <button v-show='isShow'>按钮</button>
        </div>
    </template>

    <!-- 组件模板 -->
    <template id='note'>
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-html="msg" v-for='msg in messages'></li>
            </ul>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        // 自定义组件
        const vComp = {
            template: '#comp',
            data() {
                return {
                    msg: '这是一个子组件',
                    isShow: false,
                }
            },
        }

        // 笔记列表组件
        const vNote = {
            template: '#note',
            props: {
                title: String,
                messages: {
                    type: Array,
                    default () {
                        return [];
                    }
                }
            },
        }

        const app = new Vue({
            el: '#app',
            data: {
                title: '组件的变量作用域',
                messages: [
                    `子组件模板上引用的变量必需是在子组件内部定义了的，无法直接引用父级或 vue 实例里的变量`,
                    `vue 实例子组件标签上引用的变量是 vue 实例内部的变量，无法直接引用子组件内部定义的变量`,
                    `父组件模板上的所有东西都会在父级作用域内编译`,
                    `子组件模板上的所有东西都会在子级作用域内编译`,
                ],
                isShow: true,
            },
            components: {
                vNote,
                vComp,
            },
            computed: {},
            methods: {},
        });
    </script>
</body>

</html>